<template>
  <div class="usermenage">
    <Layout :style="{ padding: '0 24px 24px' }">
      <Breadcrumb :style="{ margin: '24px 0' }">
        <BreadcrumbItem to="/home"
          ><Icon type="ios-home-outline"></Icon>形拓资源网</BreadcrumbItem
        >
        <BreadcrumbItem
          ><Icon type="ios-list-box-outline" />个人中心</BreadcrumbItem
        >
        <BreadcrumbItem><Icon type="ios-contact" />用户管理</BreadcrumbItem>
      </Breadcrumb>
      <Content
        class="usercontent"
        :style="{
          padding: '24px',
          background: '#fff'
        }"
      >
        <h2 class="title">用户管理</h2>
        <Divider />
        <Form ref="formInline" :model="formInline" inline>
          <FormItem prop="userId">
            <Input
              type="number"
              v-model="formInline.userId"
              placeholder="请输入用户编号"
            >
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem prop="username">
            <Input
              type="text"
              v-model="formInline.username"
              placeholder="请输入用户姓名"
            >
              <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem prop="depart">
            <Select
              v-model="formInline.depart"
              ref="select1"
              style="width:200px"
              placeholder="请选择所属部门"
            >
              <Option value="总经办">总经办</Option>
              <Option value="教育销售部">教育销售部</Option>
              <Option value="市场部">市场部</Option>
              <Option value="程序组">程序组</Option>
              <Option value="模型组">模型组</Option>
              <Option value="项目组">项目组</Option>
              <Option value="IT组">IT组</Option>
              <Option value="行政部">行政部</Option>
              <Option value="财务部">财务部</Option>
            </Select>
          </FormItem>
          <!-- <FormItem prop="depart">
            <Input
              type="text"
              v-model="formInline.depart"
              placeholder="请输入所属部门"
            >
              <Icon type="ios-cafe-outline" slot="prepend"></Icon>
            </Input>
          </FormItem> -->
          <FormItem>
            <Button type="primary" icon="ios-search" @click="handleSubmit()"
              >查找</Button
            >
          </FormItem>
          <FormItem>
            <Button icon="md-refresh" @click="handleReset()">重置</Button>
          </FormItem>
          <FormItem label="">
            <Button
              @click="addUser()"
              class="adduser"
              type="primary"
              icon="md-add-circle"
              >添加
            </Button>
          </FormItem>
        </Form>

        <Table
          border
          :columns="columns1"
          :data="
            data1.slice((page.index - 1) * page.size, page.index * page.size)
          "
        >
          <template slot-scope="{ row }">
            <strong>{{ row.name }}</strong>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button
              type="primary"
              size="small"
              style="margin-right: 5px"
              @click="update(index)"
              >编辑</Button
            >
            <Button type="error" size="small" @click="remove(index)"
              >删除</Button
            >
          </template>
        </Table>
        <Page
          show-total
          show-elevator
          :total="data1.length"
          :current="page.index"
          :page-size="page.size"
          class="pagenation"
          @on-change="pIndexChange"
        ></Page>
      </Content>
    </Layout>
    <Modal
      v-model="modal1"
      title="添加新用户"
      @on-ok="addok"
      @on-cancel="addcancel"
    >
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="80"
      >
        <FormItem label="姓名" prop="username">
          <Input
            v-model="formValidate.username"
            placeholder="请输入姓名"
          ></Input>
        </FormItem>
        <FormItem label="账号" prop="loginName">
          <Input
            v-model="formValidate.loginName"
            placeholder="请输入账号"
            @keyup.native="clearBlank"
          ></Input>
        </FormItem>
        <FormItem label="密码" prop="password">
          <Input
            v-model="formValidate.password"
            placeholder="请输入密码"
            @keyup.native="clearBlank"
          ></Input>
        </FormItem>
        <FormItem label="部门" prop="depart">
          <Select
            v-model="formValidate.depart"
            ref="select1"
            placeholder="请选择部门"
          >
            <Option value="总经办">总经办</Option>
            <Option value="教育销售部">教育销售部</Option>
            <Option value="市场部">市场部</Option>
            <Option value="程序组">程序组</Option>
            <Option value="模型组">模型组</Option>
            <Option value="项目组">项目组</Option>
            <Option value="IT组">IT组</Option>
            <Option value="行政部">行政部</Option>
            <Option value="财务部">财务部</Option>
          </Select>
        </FormItem>

        <FormItem label="权限">
          <Checkbox v-model="rightlist.loginAuthority" disabled>登录</Checkbox>
          <Checkbox v-model="rightlist.downloadAuthority">下载</Checkbox>
          <Checkbox v-model="rightlist.manageAuthority">管理</Checkbox>
          <Checkbox v-model="rightlist.uploadAuthority">上传</Checkbox>
        </FormItem>
      </Form>
    </Modal>
    <Modal
      v-model="modal2"
      title="修改用户信息"
      @on-ok="updateok"
      @on-cancel="updatecancel"
    >
      <Form
        ref="formValidate2"
        :model="formValidate2"
        :rules="ruleValidate"
        :label-width="80"
      >
        <FormItem label="姓名" prop="username">
          <Input
            v-model="formValidate2.username"
            placeholder="请输入姓名"
          ></Input>
        </FormItem>
        <FormItem label="账号" prop="loginName">
          <Input
            v-model="formValidate2.loginName"
            placeholder="请输入账号"
          ></Input>
        </FormItem>
        <FormItem label="密码" prop="password">
          <Input
            v-model="formValidate2.password"
            placeholder="请输入密码"
          ></Input>
        </FormItem>
        <FormItem label="部门" prop="depart">
          <Select v-model="formValidate2.depart" placeholder="请选择部门">
            <Option value="总经办">总经办</Option>
            <Option value="教育销售部">教育销售部</Option>
            <Option value="市场部">市场部</Option>
            <Option value="程序组">程序组</Option>
            <Option value="模型组">模型组</Option>
            <Option value="项目组">项目组</Option>
            <Option value="IT组">IT组</Option>
            <Option value="行政部">行政部</Option>
            <Option value="财务部">财务部</Option>
          </Select>
        </FormItem>

        <FormItem label="权限">
          <Checkbox v-model="rightlist2.loginAuthority" disabled>登录</Checkbox>
          <Checkbox v-model="rightlist2.downloadAuthority">下载</Checkbox>
          <Checkbox v-model="rightlist2.manageAuthority">管理</Checkbox>
          <Checkbox v-model="rightlist2.uploadAuthority">上传</Checkbox>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import UserApi from "../../api/Userapi.js";

export default {
  data() {
    return {
      page: {
        index: 1,
        size: 10,
        total: 50
      },
      modal1: false,
      modal2: false,
      maxSize: 100000,
      formInline: {
        userId: "",
        username: "",
        depart: "",
        loginName: "",
        password: "",
        pageSize: 100000,
        pageNum: 1
      },
      columns1: [
        {
          title: "用户ID",
          key: "userId"
        },
        {
          title: "用户名",
          key: "username"
        },
        {
          title: "账号",
          key: "loginName"
        },
        {
          title: "密码",
          key: "password"
        },
        {
          title: "部门",
          key: "depart"
        },
        {
          title: "登录权限",
          key: "loginAuthority"
        },
        {
          title: "下载权限",
          key: "downloadAuthority"
        },
        {
          title: "管理权限",
          key: "manageAuthority"
        },
        {
          title: "上传权限",
          key: "uploadAuthority"
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center"
        }
      ],
      formValidate: {
        username: "",
        loginName: "",
        password: "",
        depart: "",
        loginAuthority: 1,
        downloadAuthority: 0,
        manageAuthority: 0,
        uploadAuthority: 0
      },
      formValidate2: {
        userId: "",
        username: "",
        loginName: "",
        password: "",
        depart: "",
        loginAuthority: 1,
        downloadAuthority: 0,
        manageAuthority: 0,
        uploadAuthority: 0
      },
      rightlist: {
        loginAuthority: true,
        downloadAuthority: false,
        manageAuthority: false,
        uploadAuthority: false
      },
      rightlist2: {
        loginAuthority: true,
        downloadAuthority: false,
        manageAuthority: false,
        uploadAuthority: false
      },
      ruleValidate: {
        username: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur"
          }
        ],
        loginName: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          }
        ],
        depart: [
          { required: true, message: "请选择一个部门", trigger: "change" }
        ],
        rights: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "至少选择一个权限",
            trigger: "change"
          },
          {
            type: "array",
            max: 4,
            message: "至少选择一个权限",
            trigger: "change"
          }
        ]
      },
      data1: [],
      datalength: 0
    };
  },
  methods: {
    clearBlank() {
      //空格回退
      this.formValidate.loginName = this.formValidate.loginName.replace(
        /[, ]/g,
        ""
      );
      // 不允许输入中文
      this.formValidate.loginName = this.formValidate.loginName.replace(
        /[\u4e00-\u9fa5]/gi,
        ""
      );
      // 不允许输入特殊符号
      this.formValidate.loginName = this.formValidate.loginName.replace(
        /[^\w\u4E00-\u9FA5]/g,
        ""
      );

      //空格回退
      this.formValidate.password = this.formValidate.password.replace(
        /[, ]/g,
        ""
      );
      // 不允许输入中文
      this.formValidate.password = this.formValidate.password.replace(
        /[\u4e00-\u9fa5]/gi,
        ""
      );
      // 不允许输入特殊符号
      this.formValidate.password = this.formValidate.password.replace(
        /[^\w\u4E00-\u9FA5]/g,
        ""
      );
    },
    pIndexChange(i) {
      this.page.index = i;
    },
    handleReset() {
      //重置搜索框及列表
      this.$refs.formInline.resetFields();
      this.getAllUser();
      this.pIndexChange(1);
    },
    handleSubmit() {
      //查找用户
      if (this.formInline.userId === "") {
        this.axios
          .get(UserApi.searchUsers, {
            params: {
              username: this.formInline.username,
              depart: this.formInline.depart,
              pageSize: this.maxSize,
              pageNum: 1
            }
          })
          .then(res => {
            if (res.data.status == 0) {
              window.console.log("查找结果", res.data.data.list);
              this.data1 = res.data.data.list;
              this.pIndexChange(1);
            } else {
              window.console.log("接口调用失败");
              this.$Message.error("查询失败");
            }
          });
      } else {
        this.axios
          .get(UserApi.searchUsers, {
            params: this.formInline
          })
          .then(res => {
            if (res.data.status == 0) {
              window.console.log("查找结果", res.data.data.list);
              this.data1 = res.data.data.list;
              this.pIndexChange(1);
            } else {
              window.console.log("接口调用失败");
              this.$Message.error("查询失败");
            }
          });
      }
    },
    addUser() {
      //添加用户、
      this.modal1 = true;
    },
    addok() {
      this.formValidate.loginAuthority = Number(this.rightlist.loginAuthority); //转换多选框的值为num
      this.formValidate.downloadAuthority = Number(
        this.rightlist.downloadAuthority
      );
      this.formValidate.manageAuthority = Number(
        this.rightlist.manageAuthority
      );
      this.formValidate.uploadAuthority = Number(
        this.rightlist.uploadAuthority
      );
      this.$refs["formValidate"].validate(val => {
        if (val) {
          var allparams = new URLSearchParams(this.formValidate);
          this.axios.post(UserApi.addUser, allparams).then(res => {
            if (res.data.status == 0) {
              window.console.log("添加成功", res);
              this.$Message.success("添加用户成功");
              //清空表单数据
              this.rightlist = {
                loginAuthority: true,
                downloadAuthority: false,
                manageAuthority: false,
                uploadAuthority: false
              };
              this.$refs.formValidate.resetFields();
              this.handleSubmit(); //刷新列表
            } else {
              window.console.log("接口调用失败");
              this.$Message.error("添加用户失败");
            }
          });
        } else {
          this.$Message.error("添加用户失败");
        }
      });
    },
    addcancel() {
      this.$Message.error("取消添加用户");
      this.rightlist = {
        loginAuthority: true,
        downloadAuthority: false,
        manageAuthority: false,
        uploadAuthority: false
      };
      this.$refs.formValidate.resetFields();
    },
    update(index) {
      //编辑用户,点击编辑显示现有信息
      //当前页用户列表
      var curentpageuser = this.data1.slice(
        (this.page.index - 1) * this.page.size,
        this.page.index * this.page.size
      );
      this.formValidate2 = curentpageuser[index];
      this.rightlist2.loginAuthority = Boolean(
        this.formValidate2.loginAuthority
      ); //转换多选框的值为num
      this.rightlist2.downloadAuthority = Boolean(
        this.formValidate2.downloadAuthority
      );
      this.rightlist2.manageAuthority = Boolean(
        this.formValidate2.manageAuthority
      );
      this.rightlist2.uploadAuthority = Boolean(
        this.formValidate2.uploadAuthority
      );
      this.modal2 = true;
    },
    updateok() {
      this.formValidate2.loginAuthority = Number(
        this.rightlist2.loginAuthority
      ); //转换多选框的值为num
      this.formValidate2.downloadAuthority = Number(
        this.rightlist2.downloadAuthority
      );
      this.formValidate2.manageAuthority = Number(
        this.rightlist2.manageAuthority
      );
      this.formValidate2.uploadAuthority = Number(
        this.rightlist2.uploadAuthority
      );
      var allparams = new URLSearchParams(this.formValidate2);
      this.axios.post(UserApi.updateUser, allparams).then(res => {
        if (res.data.status == 0) {
          window.console.log("修改用户信息成功", res);
          this.$Message.success("修改用户信息成功");

          this.getAllUser(); //刷新列表
        } else {
          window.console.log("修改用户信息失败");
          this.$Message.error("修改用户信息失败");
        }
      });
    },
    updatecancel() {
      this.$Message.info("取消修改用户信息");
    },
    remove(index) {
      //删除用户
      //当前页用户列表
      this.$Modal.confirm({
        title: "确定删除吗",
        content: "<p>删除后不可恢复</p>",
        onOk: () => {
          var curentpageuser = this.data1.slice(
            (this.page.index - 1) * this.page.size,
            this.page.index * this.page.size
          );
          this.axios
            .get(UserApi.deleteUser, {
              params: {
                userId: curentpageuser[index].userId
              }
            })
            .then(res => {
              if (res.data.status == 0) {
                window.console.log("删除成功", res);
                this.$Message.success("删除用户成功");
                this.handleSubmit();
              } else {
                this.$Message.error("删除用户失败");
              }
            });
        },
        onCancel: () => {
          this.$Message.info("取消删除");
        }
      });
    },
    getAllUser() {
      //获取用户列表
      this.axios
        .get(UserApi.getAllUsers, {
          params: {
            username: "",
            loginName: "",
            password: "",
            depart: "",
            pageSize: this.maxSize,
            pageNum: 1
          }
        })
        .then(res => {
          if (res.data.status == 0) {
            window.console.log("用户列表", res);
            if (res.data.data.list.length != 0) {
              this.data1 = res.data.data.list;
              this.datalength = this.data1.length;
              window.console.log(this.datalength);
            }
          } else {
            window.console.log("接口调用失败");
          }
        });
    }
  },
  mounted() {
    this.getAllUser();
  }
};
</script>
<style scoped>
.usermenage {
  position: relative;
  width: 100%;
}
.title {
  font-size: 0.28rem;
  font-weight: 700;
  font-family: "PingFang";
}
.usercontent {
  border-radius: 0.1rem;
}
.adduser {
  display: inline;
}
.pagenation {
  margin-top: 0.2rem;
}
</style>
